{extend name='public/form'/}
<!-- 表单字段 -->
{block name='fields'}
{:token_field()}
<input type="hidden" name="id" value="{$row['id']}">
<div class="layui-form-item">
    <label class="layui-form-label">角色名称</label>
    <div class="layui-input-block">
        <input type="text" name="title" value="{$row['title']}" required lay-verify="required" placeholder="请输角色名称"
            autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">权限菜单</label>
    <div class="layui-input-block">
        <div id="dataTree"></div>
    </div>
</div>
{/block}
<!-- js -->
{block name='js'}
<script>
    layui.use(['tree'], function (args) {
        var tree = layui.tree
            , $ = layui.jquery;

        var data = {$menus|raw};
            values = {$row['rights']|raw};

    // 树形组件
    tree.render({
        elem: '#dataTree',
        checkChirld: false,
        data: data,
        showCheckbox: true,
    });
    $('#dataTree').find('input[type="checkbox"]').each(function () {
        var value = $(this).attr('value');
        if (values.find(function (item) {
            return item == value;
        })) {
            $(this).attr('checked', true);
            $(this).parent().find('.layui-form-checkbox').addClass('layui-form-checked');
        }
        $(this).attr('name', 'tree[]');
    });
    });
</script>
{/block}